<template>
	<view class="page">
		<view class="login_bg">
			<image class="img" src="../../static/img/welcome_bg.png" />
			<span class="sp_1">进入手环</span>
			<view class="user_Infor">
				<view class="box">
					<label class="left">姓名</label>
					<input class="right_inp" v-model="username" type="text" placeholder="请输入昵称" />
				</view>
				<view class="box">
					<label class="left">年龄</label>
					<input class="right_inp" v-model="user_age" type="number" placeholder="请输入年龄" />
				</view>
				<view class="box">
					<radio-group name="sex" @change="radioChange">
						<label class="left">性别</label>
						<label style="margin-left: 30rpx;">
							<radio value="男" color='#E06565' /><text class="text">男</text>
							<radio value="女" color='#E06565' style="margin-left: 30rpx;" /><text class="text">女</text>
						</label>
					</radio-group>
				</view>
				<view class="box" >
					<radio-group name="roleId" @change="change">
						<label class="left">身份</label>
						<label class="right" style="margin-left: 30rpx;">
							<radio value="4" color='#E06565' /><text class="text">家属</text>
							<!-- <radio value="5" color='#E06565' style="margin-left: 30rpx;" /><text class="text">病患</text> -->
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<button type="submit" class="bt_1" @click="inquire">进入智能手环</button>
	</view>
</template>

<script>
	import {
		InsertUser,
		BindPatientRequest
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				username: '', //昵称
				user_age: null,
				sex: '',
				user_phone: '', //手机号
				phone_token: '', //验证码
				phone_token_api: '', //接口返回验证码
				disableButton: false,
				countdown: 60,
				buttonText: '验证码',
				roleId: '',
			}
		},
		methods: {
			//身份改变
			change(e) {
				this.roleId = e.detail.value
			},
			//性别改变
			radioChange(e) {
				this.sex = e.detail.value
				console.log(this.sex);
			},
			//进入智能药盒
			inquire() {
				console.log(this.sex, this.username, this.user_age);
					if (this.sex != '' && this.username != '' && this.user_age != null) {
						InsertUser({
							body: {
								name: this.username,
								age: this.user_age,
								sex: this.sex,
								openId: this.$store.state.vx_openId,
								roleId: this.roleId,
								getPhoneCode: this.$store.state.vx_phone_code,
							},
							token: null
						}).then(res => {
							console.log('注册返回', res);
							if (res.code == 200) {
								this.$store.commit('$uStore', {
									name: 'vx_token',
									value: res.data.token,
								})
								this.$store.commit('$uStore', {
									name: 'vx_uid',
									value: res.data.userid,
								})
								this.$store.commit('$uStore', {
									name: 'vx_phone',
									value: res.data.phone,
								})
								this.$store.commit('$uStore', {
									name: 'vx_sex',
									value: res.data.sex,
								})
								this.$store.commit('$uStore', {
									name: 'name',
									value: res.data.name,
								})
								uni.showToast({
									title: `注册成功`,
									icon: 'success',
									duration: 2000
								})
								uni.reLaunch({
									url: '/pages/home/index'
								})
							}
						}).catch(err => {
							console.log(err);
						})
					} else {
						uni.showToast({
							title: `请填写完整信息`,
							icon: 'none',
							duration: 2000
						})
					}
				

			},
		},
		onLoad() {


		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		position: relative;
		.login_bg {
			width: 750rpx;
			height: 722rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.sp_1 {
				position: absolute;
				top: 150rpx;
				left: 308rpx;
				width: 132rpx;
				height: 32rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #333738;
				text-align: center;
				line-height: 32rpx;
			}

			.user_Infor {
				position: absolute;
				top: 30%;
				left: 30rpx;
				width: 689rpx;
				height: 650rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 28rpx 0rpx #E8EEEF;
				border-radius: 30rpx;

				.box {
					// width: 100%;
					height: 130rpx;
					margin: 0 31rpx ;
					border-bottom: 1rpx solid rgba(153, 158, 160, 0.23);
					line-height: 130rpx;
					.left {
						float: left;
						margin-left: 30rpx;
						width: 200rpx;
						font-weight: 400;
						font-size: 35rpx;
						color: #333738;
					}

					.right_inp {
						float: right;
						margin-right: 20rpx;
						margin-top: 40rpx;
					}
				}

			}
		}
		
		.bt_1 {
			margin: 180rpx auto 20rpx;
			width: 630rpx;
			height: 100rpx;
			background: #2CB0C5;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx
		}
	}
</style>